<template>
    <section class="recommend">
    <div class="recommend-title">
        <van-divider :style="{borderColor:'#ccc',padding:'0 16px'}">可能你还想要</van-divider>
    </div>
    <div class="recommend-list">
        <div class="recommend-item" v-for="item in recommendList" :key="item.id"><img :src="item.imageHost+item.mainImage" @click="toDetal(item.id)">
            <p>头层真皮沙发</p> <i>￥ 9998</i>
        </div>
       
    </div>
    
</section>
</template>
<script>
export default {
    created(){
        this.$axios({
            url:'product/recommend',
            method:'get'
        }).then((res)=>{
           this.recommendList = res.data.data
        })
    },
    data() {
        return {
            recommendList:null
        }
    },
    methods:{
        toDetal(id){
            this.$router.push({name:'Product-detail',params:{id}})
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../common/style/mixin.scss';
.recommend {
    margin-bottom: 100px;
    .recommend-list {
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;

        .recommend-item {
            display: flex;
            flex-direction: column;
            width: 50%;
            padding: 20px;
            @include boxSizing;
            border-bottom: 1px solid #dcdcdc;

            &:nth-child(2n-1) {
                border-right: 1px solid #dcdcdc;
            }

            img {
                width: 100%;
                height: 290px;
                margin: 0 auto;
            }

            p {
                height: 60px;
                padding: 20px 0;
                font-size: 26px;
                line-height: 40px;
                color: #333;
                overflow: hidden;
            }

            i {
                font-style: normal;
                font-size: 32px;
                color: $red;
            }
        }
    }
}
</style>